<template>
	<view>
	<!-- 头部 -->
	<view class="bgc"></view>
	<!-- 头部 -->
	<view class="header">
		
		<view class="area">
			<!-- 选择地区 -->
			<wangding-pickerAddress @change='change'>{{txt}}</wangding-pickerAddress>
		</view>
		<my-search>
		</my-search>
	</view>
	<!-- 分类区域 -->
     <view class="category">
     	   <navigator  class="cate-item" url="../../subpkg1/category/category" hover-class="none">
     		             <image src="https://img.tukuppt.com/png_preview/00/50/04/Qpphv5evAm.jpg%21/fw/780"     ></image>
     		             <text>童装</text>
     	   </navigator>
     	   <navigator  class="cate-item" url="../../subpkg1/category/category" hover-class="none">
     	   				  <image src="https://img0.baidu.com/it/u=3984556372,1980936217&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680109200&t=8ae5dd795060936a2a23481795c423c1" ></image>
     	   				  <text>童车</text>
     	   </navigator>
     	   <navigator  class="cate-item" url="../../subpkg1/category/category" hover-class="none">
     	   				  <image src="https://img1.baidu.com/it/u=3246102726,821471293&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=376" ></image>
     	   				  <text>儿童洗护</text>
     	   </navigator>
     	   <navigator  class="cate-item" url="../../subpkg1/category/category" hover-class="none">
     	   				  <image src="https://img0.baidu.com/it/u=2777006526,1184705975&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500" ></image>
     	   				  <text>尿裤湿巾</text>
     	   </navigator>
     	   <navigator  class="cate-item" url="../../subpkg1/category/category" hover-class="none">
     	   				  <image src="https://img1.baidu.com/it/u=2967056793,3227243639&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500" ></image>
     	   				  <text>儿童喂养</text>
     	   </navigator>
     	   <navigator  class="cate-item" url="../../subpkg1/category/category" hover-class="none">
     	   				  <image src="https://img1.baidu.com/it/u=3112272601,1310773497&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=526" ></image>
     	   				  <text>营养辅食</text>
     	   </navigator>
     	   <navigator  class="cate-item" url="../../subpkg1/category/category" hover-class="none">
     	   				  <image src="https://img2.baidu.com/it/u=2061297060,2078793856&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" ></image>
     	   				  <text>奶粉专区</text>
     	   </navigator> 
     	   <navigator  class="cate-item" url="../../subpkg1/category/category" hover-class="none">
     	   				  <image src="https://img0.baidu.com/it/u=1908517735,3532253772&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=260"></image>
     	   				  <text>儿童寝居</text>
     	   </navigator>
     	   <navigator  class="cate-item" url="../../subpkg1/category/category" hover-class="none">
     	   				  <image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.x_ZUJ9NNxzdtnCbpCmhvZgHaJf?w=147&h=181&c=7&r=0&o=5&dpr=1.5&pid=1.7" ></image>
     	   				  <text>孕妈专区</text>
     	   </navigator>
     	   <navigator  class="cate-item" url="../../subpkg1/category/category" hover-class="none">
     	   				  <image src="https://tse3-mm.cn.bing.net/th/id/OIP-C.SoFm1ENd6dbzjyp_P1P0UwAAAA?w=172&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" ></image>
     	   				  <text>其他</text>
     	   </navigator>
     </view>
	<view class="notice">
		 <text>公告：</text>
         <text>购物平台正式上线！！！</text>
	</view>
	 	
	<view class="show">
		<!-- 顶部 -->
		  <view class="showtop">
		  	  <text :class="current==item.id? 'text-active' : ''" @click="onClickItem" v-for="(item,index) in list1" :key="index" :id="item.id">{{item.value}}</text>
		  </view>
		 <!-- <view class="showbottom">
		  	 <view class="showbottomitem">
		  	 	
		  	 </view>
		  </view> -->
		 <swiper :interval="3000" :duration="1000" :current="current" @change="swiperChange">
		 	<swiper-item>
		 		<view class="swiper-item">
					<!-- 	全部 -->
					<view class="cate-item" v-for="(item2 , index) in list2 " :key="index">
						<image :src="item2.image"  class="bigimage"></image>
						<view class="cate-item-left">
							<text>{{item2.text1}}</text>
							<text>{{item2.text2}}</text>
							<text>¥&nbsp;{{item2.text3}}</text>
						</view>
						<image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.UrhO0785WqZxln0zblAvRwHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7" class="smallimage"></image>
					</view>
				
				</view>
		 	</swiper-item>
		 	<swiper-item>
		 		<view class="swiper-item">
					<!-- 童装 -->
					<view class="cate-item" v-for="(item3 , index) in list3 " :key="index">
						<image :src="item3.image"  class="bigimage"></image>
						<view class="cate-item-left">
							<text>{{item3.text1}}</text>
							<text>{{item3.text2}}</text>
							<text>¥&nbsp;{{item3.text3}}</text>
						</view>
						<image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.UrhO0785WqZxln0zblAvRwHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7" class="smallimage"></image>
					</view>
				</view>
		 	</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<!-- 童车 -->
					<view class="cate-item" v-for="(item4 , index) in list4 " :key="index">
						<image :src="item4.image"  class="bigimage"></image>
						<view class="cate-item-left">
							<text>{{item4.text1}}</text>
							<text>{{item4.text2}}</text>
							<text>¥&nbsp;{{item4.text3}}</text>
						</view>
						<image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.UrhO0785WqZxln0zblAvRwHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7" class="smallimage"></image>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<!-- 儿童洗护 -->
					<view class="cate-item" v-for="(item5 , index) in list5 " :key="index">
						<image :src="item5.image"  class="bigimage"></image>
						<view class="cate-item-left">
							<text>{{item5.text1}}</text>
							<text>{{item5.text2}}</text>
							<text>¥&nbsp;{{item5.text3}}</text>
						</view>
						<image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.UrhO0785WqZxln0zblAvRwHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7" class="smallimage"></image>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<!-- 尿裤湿布 -->
					<view class="cate-item" v-for="(item6 , index) in list6 " :key="index">
						<image :src="item6.image"  class="bigimage"></image>
						<view class="cate-item-left">
							<text>{{item6.text1}}</text>
							<text>{{item6.text2}}</text>
							<text>¥&nbsp;{{item6.text3}}</text>
						</view>
						<image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.UrhO0785WqZxln0zblAvRwHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7" class="smallimage"></image>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<!-- 其他 -->
					<view class="cate-item" v-for="(item7 , index) in list7 " :key="index">
						<image :src="item7.image"  class="bigimage"></image>
						<view class="cate-item-left">
							<text>{{item7.text1}}</text>
							<text>{{item7.text2}}</text>
							<text>¥&nbsp;{{item7.text3}}</text>
						</view>
						<image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.UrhO0785WqZxln0zblAvRwHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7" class="smallimage"></image>
					</view>
				</view>
			</swiper-item>
		 </swiper>
	</view>
		
	

	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
			txt: '广州市',	
			current: 0,
			list1:[
			{id:0,
				 value:'全部'},
			 {id:1,
				  value:'童装'},
			  {id:2,
				   value:'童车'},
			   {id:3,
				    value:'儿童洗护'},
				{id:4,
					 value:'尿裤湿巾'},
				{id:5,
				 value:'其他'},
			],
			list2:[
				{
					image:'https://tse3-mm.cn.bing.net/th/id/OIP-C.XZ_abyRqUSlPQZecT_sCbAHaE-?w=301&h=203&c=7&r=0&o=5&dpr=1.5&pid=1.7',
					text1:'进口奶粉',
					text2:'已售100',
					text3:'300.00'
				},
				{
					image:'https://img.alicdn.com/imgextra/i1/2207661715695/O1CN01QaQixy1rwMGsj7AJt_!!2207661715695.jpg',
					text1:'进口奶粉',
					text2:'已售90',
					text3:'260.00'
				},
				{
					image:'https://g-search3.alicdn.com/img/bao/uploaded/i4/i1/2455164953/O1CN010W1V0z1mSWX9xJdWM_!!0-item_pic.jpg_460x460Q90.jpg_.webp',
					text1:'奶瓶',
					text2:'已售120',
					text3:'150.00'
				},
				{
					image:'https://g-search2.alicdn.com/img/bao/uploaded/i4/i3/3691886865/O1CN01tJPBWQ20aDohMidR8_!!3691886865.jpg_460x460Q90.jpg_.webp',
					text1:'尿布',
					text2:'已售130',
					text3:'200.00'
				}
			],
			list3:[{
					image:'https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/2960684901/O1CN01G4B09b1m4hwjxKvqV_!!2960684901.jpg_460x460Q90.jpg_.webp',
					text1:'绯乐童装',
					text2:'已售100',
					text3:'300.00'
				},
				{
					image:'https://img1.baidu.com/it/u=2868822246,4039802594&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=58c22931047b8a7730352b8c1188e78a',
					text1:'女孩童装',
					text2:'已售190',
					text3:'250.00'
				},
				{
					image:'https://img2.baidu.com/it/u=430122522,3939199126&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					text1:'亲子装',
					text2:'已售320',
					text3:'150.00'
				},
				{   
					image:'https://img0.baidu.com/it/u=876091426,572287490&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
					text1:'男童夏装',
					text2:'已售230',
					text3:'200.00'
				}],
			list4:[{
					image:'https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/2960684901/O1CN01G4B09b1m4hwjxKvqV_!!2960684901.jpg_460x460Q90.jpg_.webp',
					text1:'绯乐童装',
					text2:'已售100',
					text3:'300.00'
				},
				{
					image:'https://img1.baidu.com/it/u=2868822246,4039802594&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=58c22931047b8a7730352b8c1188e78a',
					text1:'女孩童装',
					text2:'已售190',
					text3:'250.00'
				},
				{
					image:'https://img2.baidu.com/it/u=430122522,3939199126&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					text1:'亲子装',
					text2:'已售320',
					text3:'150.00'
				},
				{   
					image:'https://img0.baidu.com/it/u=876091426,572287490&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
					text1:'男童夏装',
					text2:'已售230',
					text3:'200.00'
				}],
			list5:[{
					image:'https://tse3-mm.cn.bing.net/th/id/OIP-C.XZ_abyRqUSlPQZecT_sCbAHaE-?w=301&h=203&c=7&r=0&o=5&dpr=1.5&pid=1.7',
					text1:'进口奶粉',
					text2:'已售100',
					text3:'300.00'
				},
				{
					image:'https://img.alicdn.com/imgextra/i1/2207661715695/O1CN01QaQixy1rwMGsj7AJt_!!2207661715695.jpg',
					text1:'进口奶粉',
					text2:'已售90',
					text3:'260.00'
				},
				{
					image:'https://g-search3.alicdn.com/img/bao/uploaded/i4/i1/2455164953/O1CN010W1V0z1mSWX9xJdWM_!!0-item_pic.jpg_460x460Q90.jpg_.webp',
					text1:'奶瓶',
					text2:'已售120',
					text3:'150.00'
				},
				{
					image:'https://g-search2.alicdn.com/img/bao/uploaded/i4/i3/3691886865/O1CN01tJPBWQ20aDohMidR8_!!3691886865.jpg_460x460Q90.jpg_.webp',
					text1:'尿布',
					text2:'已售130',
					text3:'200.00'
				}],
			list6:[{
					image:'https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/2960684901/O1CN01G4B09b1m4hwjxKvqV_!!2960684901.jpg_460x460Q90.jpg_.webp',
					text1:'绯乐童装',
					text2:'已售100',
					text3:'300.00'
				},
				{
					image:'https://img1.baidu.com/it/u=2868822246,4039802594&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=58c22931047b8a7730352b8c1188e78a',
					text1:'女孩童装',
					text2:'已售190',
					text3:'250.00'
				},
				{
					image:'https://img2.baidu.com/it/u=430122522,3939199126&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					text1:'亲子装',
					text2:'已售320',
					text3:'150.00'
				},
				{   
					image:'https://img0.baidu.com/it/u=876091426,572287490&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
					text1:'男童夏装',
					text2:'已售230',
					text3:'200.00'
				}],
			list7:[{
					image:'https://tse3-mm.cn.bing.net/th/id/OIP-C.XZ_abyRqUSlPQZecT_sCbAHaE-?w=301&h=203&c=7&r=0&o=5&dpr=1.5&pid=1.7',
					text1:'进口奶粉',
					text2:'已售100',
					text3:'300.00'
				},
				{
					image:'https://img.alicdn.com/imgextra/i1/2207661715695/O1CN01QaQixy1rwMGsj7AJt_!!2207661715695.jpg',
					text1:'进口奶粉',
					text2:'已售90',
					text3:'260.00'
				},
				{
					image:'https://g-search3.alicdn.com/img/bao/uploaded/i4/i1/2455164953/O1CN010W1V0z1mSWX9xJdWM_!!0-item_pic.jpg_460x460Q90.jpg_.webp',
					text1:'奶瓶',
					text2:'已售120',
					text3:'150.00'
				},
				{
					image:'https://g-search2.alicdn.com/img/bao/uploaded/i4/i3/3691886865/O1CN01tJPBWQ20aDohMidR8_!!3691886865.jpg_460x460Q90.jpg_.webp',
					text1:'尿布',
					text2:'已售130',
					text3:'200.00'
				}]
			};
		},
		methods:{
			change(data) {
				this.txt = data.data[2]
			},
			onClickItem(e) {
				  // console.log(e.target.id);
							if (this.current !== e.target.id) {
								this.current = e.target.id
							}
		 },
		 swiperChange(e){
			 this.current = e.detail.current;
		 }
		}
	}
</script>

<style lang="scss" scoped>
	// 背景图
	.bgc {
		width: 100%;
		height: 180px;
		z-index: -1;
		border-bottom-left-radius: 20% 30%;
		border-bottom-right-radius: 20% 30%;
		background: linear-gradient(#f08988, #ff8583);
	}
	// 头部
	.header {
		height: 40px;
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 10px 10px 0 0px;
		margin-top: -140px;
	
		.area {
			text-align: center;
			line-height: 38px;
			color: white;
			margin-right:20px;
		}
	}
	
	// 分类区域
	.category{
		// border: 1px solid #ccc;
		background-color: #fff;
		border-radius: 8px;
		display: flex;
		justify-content: space-evenly;
		width: 80%;
		margin:2px auto;
		margin-top:20px;
		flex-wrap: wrap;
		.cate-item{
			// 图片
			image{
				width: 35px;
				height: 35px;
				margin-bottom: 10px;
				border-radius: 50%;
			}
			text{
				font-size: 10px;
				font-weight: 600;
			}
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 17%;
			margin: 3px;
			height: 80px;
			// background-color: pink;
		}
	}
		// 公告
	.notice{
		width: 80%;
		margin:0 auto;
		margin-top: 12px;
		height: 20px;
		display: flex;
		flex-direction: row;
		// align-items: center;
		text:nth-child(1){
		height: 20px;
		line-height: 20px;
		 width: 20%;
		 color:#fa9902;
		  font-weight: 600;
		}
		text:nth-child(2){
		height: 20px;
		line-height: 20px;
		 width: 80%;
		 color:black;
		}
	}
	
	// tab栏切换
.show{
	width: 90%;
	margin:0 auto;
	margin-top: 6px;
	// height: 600px;
	// background-color: #fa9902;
	// 顶部
	.showtop{
		margin-bottom: 10px;
		 text{
			 display: inline-block;
			 color:#ccc;
			 margin-right: 2.5%;
			 border-right: 1px solid #ccc;
			 font-size: 13px;
			 padding-right: 2.5%;
		 }
			 
		 text:nth-child(6){
			 border-right: none;
		 }
		 .text-active{
			 color:#fa9902;
			 font-weight: 600;
			 // border-bottom: #fa9902 1px solid;
		 }
	}
	// 底部
	swiper{
		width: 100%;
		height: 400px;
		// background-color: pink;
		.swiper-item{
			width: 100%;
			height: 100%;
			// background-color: #ccc;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			flex-wrap: wrap;
			.cate-item{
				display: flex;
				flex-direction: column;
				position: relative;
				width: 48%;
				height: 48%;
				margin-bottom: 3%;
				border-radius: 5%;
				// background-color: #f08988;
				.bigimage{
					border-radius: 5%;
					width: 100%;
					height: 120px;
				}
				text:nth-child(1){
					margin-top: 10px;
					margin-left: 10px;
				  display: block;
				  font-size: 10px;
				  color:black;
				}
				text:nth-child(2){
					margin-left: 10px;
					display: block;
				  font-size: 8px;
				  color:#ccc;
				  margin-bottom: 10px;
				}
				text:nth-child(3){
				display: block;
				  font-size: 15px;
				  color:#f08988;
				}
				.smallimage{
				   position: absolute;
				   width: 25px;
				   border-radius: 50%;
				   height: 25px;
				   bottom: 10px;
				   right:10px;
				}
			}
		}
	}
}
</style>
